<template>
  <div class="main-table">
    <div class="header">
      <el-form
        :inline="true"
        :model="formSearch"
        class="demo-form-inline"
        ref="formSearch"
      >
        <el-form-item label="姓名">
          <el-input v-model="formSearch.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formSearch.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <el-icon><Search /></el-icon> 搜索</el-button
          >
          <el-button type="success" @click="sendAdd"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <Table ref="tableInfo" :searchInfo="formSearch" />
    <Dialog ref="addInfo" :reload="search" @refresh="reset" />
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import Dialog from "./components/drawer.vue";
import Table from "./components/table.vue";
import { Search, Plus } from "@element-plus/icons";
export default {
  components: {
    Dialog,
    Table,
    Search,
    Plus,
  },
  setup() {
    const addInfo = ref(null);
    const tableInfo = ref(null);
    const formSearch = ref(null);
    const state = reactive({
      formSearch: {
        name: "",
        phone: "",
      },
    });

    //resetSearch
    const reset = () => {
      formSearch.value.resetFields();
      nextTick(() => search());
    };
    //搜索
    const search = () => {
      tableInfo.value.getData();
    };
    //添加
    const sendAdd = () => {
      addInfo.value.open("new");
    };
    return {
      addInfo,
      tableInfo,
      sendAdd,
      search,
      reset,
      formSearch,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
</style>